<%@page import="org.apache.velocity.runtime.directive.Include"%>
<%@ include file="/common/taglibs.jsp"%>

<head>
    <title><fmt:message key="userProfile.title"/></title>
    <meta name="menu" content="Profile"/>
    <style>
    	.dropdown-menu{
    		z-index:1060 !important;
    	}
    </style>
</head>

<c:set var="delObject" scope="request"><fmt:message key="userList.user"/></c:set>
<c:set var="unknownVal" scope="request"><fmt:message key="user.unknown"/></c:set>
<c:set var="validateEditfnUrl" scope="request"><c:url value="/scripts/validateEditfn"/></c:set>
<c:set var="validateEditemailUrl" scope="request"><c:url value="/scripts/validateEditemail"/></c:set>
<c:set var="validateEditpwdUrl" scope="request"><c:url value="/scripts/validateEditpwd"/></c:set>

<script type="text/javascript">var msgDelConfirm =
   "<fmt:message key="delete.confirm"><fmt:param value="${delObject}"/></fmt:message>";
</script>
<div class="row-fluid">
	<div class="thumbnails">
		<div class="span2">
			<a class="thumbnail" href="#">
				<img alt="160x120" data-src="holder.js/160x120" style="width: 160px; height: 120px" src="">
			</a>
		</div>
		<div class="span2">
			<br>
			<p data-bind="text: fullname"></p>
			<p class="hide-long-text" data-bind="hideLongText: email"></p>
			<p data-bind="text: username"></p>
			<a href="#"><fmt:message key="userProfile.changeavatar"/></a>
		</div>
		<div class="span2">
			<br>
			<a class="btn btn-small" href="#editacc" role="button" data-toggle="modal"><i class="icon-pencil"></i> <fmt:message key="profile.accSetting"/></a>
		</div>
	</div>
</div>
<br>
<br>

<ul class="nav nav-list">
	<li class="divider"></li>
</ul>
<div class="row-fluid">
	<div class="span6" style="border-right: 1px solid #E5E5E5;">
		<div class="row-fluid">
			<div class="span9">
				<h4><fmt:message key="userProfile.basicInfo"/></h4>
			</div>
			<div class="span2">
				<br>
				<a class="btn btn-small" href="#editinfo" role="button" data-toggle="modal"><i class="icon-pencil"></i> <fmt:message key="profile.edit"/></a>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span4">
				<label style="color:grey;"><fmt:message key="user.gender"/></label>
			</div>
			<div class="span6" data-bind="text:gender">
			</div>
		</div>
		<div class="row-fluid">
			<div class="span4">
				<label style="color:grey;"><fmt:message key="user.dob"/></label>
			</div>
			<div class="span6">
				<c:choose>
				    <c:when test="${user.dob}">
				       <c:out value="${user.dob}" escapeXml="false" default="${unknownVal}"/>
				    </c:when>
				    <c:otherwise>
				        <c:out value="${unknownVal}" escapeXml="false" default="${unknownVal}"/>
				    </c:otherwise>
				</c:choose>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span4">
				<label style="color:grey;"><fmt:message key="user.phoneNumber"/></label>
			</div>
			<div class="span6">
				<c:choose>
				    <c:when test="${user.phoneNumber}">
				       <c:out value="${user.phoneNumber}" escapeXml="false" default="${unknownVal}"/>
				    </c:when>
				    <c:otherwise>
				       <c:out value="${unknownVal}" escapeXml="false" default="${unknownVal}"/>
				    </c:otherwise>
				</c:choose>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span4">
				<label style="color:grey;"><fmt:message key="user.address"/></label>
			</div>
			<div class="span6">
				<c:choose>
				    <c:when test="${(user.address!=null && (user.address.address || user.address.city || user.address.province || user.address.country || user.address.postalCode))}">
				       <c:if test="${user.address.address}">
				       	<c:out value="${user.address.address}" escapeXml="false" default="${unknownVal}"/>,
				       </c:if>
				       <c:if test="${user.address.city}">
				       	<c:out value="${user.address.city}" escapeXml="false" default="${unknownVal}"/> <fmt:message key="user.address.city"/>
				       </c:if>
				       <c:if test="${user.address.province}">
				       	<c:out value="${user.address.province}" escapeXml="false" default="${unknownVal}"/> <fmt:message key="user.address.province"/>
				       </c:if>
				       <c:if test="${user.address.postalCode}">
				       	<c:out value="${user.address.postalCode}" escapeXml="false" default="${unknownVal}"/>
				       </c:if>
				    </c:when>
				    <c:otherwise>
				       <c:out value="${unknownVal}" escapeXml="false" default="${unknownVal}"/>
				    </c:otherwise>
				</c:choose>
				
			</div>
		</div>
	</div>
<!-- 	<div class="span1" style="border-left: 1px solid gray;"> -->
<!-- 	</div> -->
	<div class="span6">
		<div class="row-fluid">
			<div class="span9">
				<h4><fmt:message key="userProfile.statistic"/></h4>
			</div>
			<div class="span2">
				<br>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span4">
				<label style="color:grey;"><fmt:message key="user.balance"/> (VND)</label>
			</div>
			<div class="span8">
				<c:choose>
					<c:when test="${user.balance}">
						<c:out value="${user.balance}" escapeXml="false" />
					</c:when>
					<c:otherwise>
						<c:out value="0" escapeXml="false"/>
					</c:otherwise>
				</c:choose>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span4">
				<label style="color:grey;"><fmt:message key="user.rate"/> (%)</label>
			</div>
			<div class="span8">
				<c:choose>
					<c:when test="${user.rate}">
						<c:out value="${user.rate}" escapeXml="false" />
					</c:when>
					<c:otherwise>
						<c:out value="0" escapeXml="false" />
					</c:otherwise>
				</c:choose>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span4">
				<label style="color:grey;"><fmt:message key="user.succRate"/> (%)</label>
			</div>
			<div class="span8">
				<c:choose>
					<c:when test="${user.succRate}">
						<c:out value="${user.succRate}" escapeXml="false" />
					</c:when>
					<c:otherwise>
						<c:out value="0" escapeXml="false" />
					</c:otherwise>
				</c:choose>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span4">
				<label style="color:grey;"><fmt:message key="user.jobWorked"/></label>
			</div>
			<div class="span8">
				<c:choose>
					<c:when test="${user.jobWorked}">
						<c:out value="${user.jobWorked}" escapeXml="false" />
					</c:when>
					<c:otherwise>
						<c:out value="0" escapeXml="false" />
					</c:otherwise>
				</c:choose>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span4">
				<label style="color:grey;"><fmt:message key="user.jobPosted"/></label>
			</div>
			<div class="span8">
				<c:choose>
					<c:when test="${user.jobPosted}">
						<c:out value="${user.jobPosted}" escapeXml="false" />
					</c:when>
					<c:otherwise>
						<c:out value="0" escapeXml="false" />
					</c:otherwise>
				</c:choose>
			</div>
		</div>
<!-- 		<div class="row-fluid"> -->
<!-- 			<div class="span4"> -->
<%-- 				<label style="color:grey;"><fmt:message key="user.jobPosted"/></label> --%>
<!-- 			</div> -->
<!-- 			<div class="span8"> -->
<%-- 				<c:choose> --%>
<%-- 					<c:when test="${user.jobPosted}"> --%>
<%-- 						<c:out value="${user.jobPosted}" escapeXml="false" default="${unknownVal}"/> --%>
<%-- 					</c:when> --%>
<%-- 					<c:otherwise> --%>
<%-- 						<c:out value="${unknownVal}" escapeXml="false" default="${unknownVal}"/> --%>
<%-- 					</c:otherwise> --%>
<%-- 				</c:choose> --%>
<!-- 			</div> -->
<!-- 		</div> -->
	</div>
</div>

<!-- Edit info Modal -->
    <div id="editacc" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    	<div class="modal-header">
    		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    		<h4 id="myModalLabel"><fmt:message key="profile.accSetting"/></h4>
    	</div>
	    <div class="modal-body">
	    	
	    	
	    	<div class="accsetting">
	    		
		    	<div class="row-fluid accrow">
		    		<form:form commandName="user" method="post" id="editfn" autocomplete="off" cssClass="" data-validate="${validateEditfnUrl}">
					<div class="span3 acclabel">
						<fmt:message key="user.fullName"/>
					</div>
					<div class="span6 accbody" data-bind="text: fullname">				
					</div>
					<div class="span8 accedit">
							<div class="accstatus-fail alert alert-error fade in"></div>
							<span class="row-fluid">
								<span class="span4">
									<label><fmt:message key="user.firstName"/></label>
								</span>
								<span class="span8">
									<spring:bind path="user.firstName">
        							<fieldset class="control-group${(not empty status.errorMessage) ? ' error' : ''}">
        							</spring:bind>
            							<div class="controls">
	                						<form:input class="accfield" path="firstName" id="firstName" maxlength="50"/>
						                	<form:errors path="firstName" cssClass="help-inline"/>
					            		</div>
					        		</fieldset>
								</span>
							</span>
							<span class="row-fluid">
								<span class="span4">
									<label><fmt:message key="user.lastName"/></label>
								</span>
								<span class="span8">
									<spring:bind path="user.lastName">
        							<fieldset class="control-group${(not empty status.errorMessage) ? ' error' : ''}">
        							</spring:bind>
            							<div class="controls">
	                						<form:input class="accfield" path="lastName" id="lastName" maxlength="50"/>
						                	<form:errors path="lastName" cssClass="help-inline"/>
					            		</div>
					        		</fieldset>
								</span>
							</span>
							<span class="row-fluid">
								<span class="span4">
								</span>
								<span class="span5">
									<button class="btn btn-small btn-primary" type="submit">save</button>
									<button class="btn btn-small btn-close" type="reset">close</button>
								</span>
								<span class="span3 accloading">
								</span>
							</span>
						</div>	
					<div class="span3 accaction">
						<span class="accicon">
							<i class="icon-pencil"></i>
						</span>
						<span>
							<fmt:message key="profile.edit"/>
						</span>
					</div>  
					<div class="span3 accstatus-success">
						<fmt:message key="profile.changed"/>
					</div>
					</form:form>		
		    	</div>
		    	
		    	
		    	<div class="row-fluid accrow">
		    		<form:form commandName="user" method="post" id="editemail" autocomplete="off" cssClass="" data-validate="${validateEditemailUrl}">
					<div class="span3 acclabel">
						<fmt:message key="user.email"/>
					</div>
					<div class="span6 accbody" data-bind="text:email">
					</div>
					<div class="span8 accedit">
							<div class="accstatus-fail alert alert-error fade in"></div>
							<span class="row-fluid">
								<span class="span4">
									<label><fmt:message key="user.email"/></label>
								</span>
								<span class="span8">
									<spring:bind path="user.email">
        							<fieldset class="control-group${(not empty status.errorMessage) ? ' error' : ''}">
        							</spring:bind>
            							<div class="controls">
	                						<form:input class="accfield" path="email" id="email" maxlength="50"/>
						                	<form:errors path="email" cssClass="help-inline"/>
					            		</div>
					        		</fieldset>
								</span>
							</span>
							<span class="row-fluid">
								<span class="span4">
									<label><fmt:message key="user.password"/></label>
								</span>
								<span class="span8">
									<spring:bind path="user.password">
        							<fieldset class="control-group${(not empty status.errorMessage) ? ' error' : ''}">
        							</spring:bind>
            							<div class="controls">
	                						<form:password class="accfield" path="password" id="password" maxlength="50"/>
						                	<form:errors path="password" cssClass="help-inline"/>
					            		</div>
					        		</fieldset>
								</span>
							</span>
							<span class="row-fluid">
								<span class="span4">
								</span>
								<span class="span5">
									<button class="btn btn-small btn-primary" type="submit">save</button>
									<button class="btn btn-small btn-close" type="reset">close</button>
								</span>
								<span class="span3 accloading">
								</span>
							</span>
					</div>	  
					<div class="span3 accaction">
						<span class="accicon">
							<i class="icon-pencil"></i>
						</span>
						<span>
							<fmt:message key="profile.edit"/>
						</span>
					</div>
					<div class="span3 accstatus-success">
						<fmt:message key="profile.changed"/>
					</div>
					</form:form>
		    	</div>
		    	
		    	
		    	<div class="row-fluid accrow">
		    		<form:form commandName="user" method="post" id="editpwd" autocomplete="off" cssClass="" data-validate="${validateEditpwdUrl}">
					<div class="span3 acclabel">
						<fmt:message key="user.password"/>
					</div>
					<div class="span6 accbody">
						*********
					</div>
					<div class="span8 accedit">
						<div class="accstatus-fail alert alert-error fade in"></div>
						<span class="row-fluid">
							<span class="span5">
								<label><fmt:message key="user.currentPassword"/></label>
							</span>
							<span class="span7">
								<spring:bind path="user.password">
       							<fieldset class="control-group${(not empty status.errorMessage) ? ' error' : ''}">
       							</spring:bind>
           							<div class="controls">
                						<form:password class="accfield" path="password" id="password" maxlength="50"/>
					                	<form:errors path="password" cssClass="help-inline"/>
				            		</div>
				        		</fieldset>
							</span>
						</span>
						<span class="row-fluid">
							<span class="span5">
								<label><fmt:message key="user.newPassword"/></label>
							</span>
							<span class="span7">
								<spring:bind path="user.newPassword">
       							<fieldset class="control-group${(not empty status.errorMessage) ? ' error' : ''}">
       							</spring:bind>
           							<div class="controls">
                						<form:password class="accfield" path="newPassword" id="newPassword" maxlength="50"/>
					                	<form:errors path="newPassword" cssClass="help-inline"/>
				            		</div>
				        		</fieldset>
							</span>
						</span>
						<span class="row-fluid">
							<span class="span5">
								<label><fmt:message key="user.confirmPassword"/></label>
							</span>
							<span class="span7">
								<spring:bind path="user.confirmPassword">
       							<fieldset class="control-group${(not empty status.errorMessage) ? ' error' : ''}">
       							</spring:bind>
           							<div class="controls">
                						<form:password class="accfield" path="confirmPassword" id="confirmPassword" maxlength="50"/>
					                	<form:errors path="confirmPassword" cssClass="help-inline"/>
				            		</div>
				        		</fieldset>
							</span>
						</span>
						<span class="row-fluid">
							<span class="span5">
							</span>
							<span class="span5">
								<button class="btn btn-small btn-primary" type="submit">save</button>
								<button class="btn btn-small btn-close" type="reset">close</button>
							</span>
							<span class="span2 accloading">
							</span>
						</span>
					</div>
					<div class="span3 accaction">
						<span class="accicon">
							<i class="icon-pencil"></i>
						</span>
						<span>
							<fmt:message key="profile.edit"/>
						</span>
					</div>
					<div class="span3 accstatus-success">
						<fmt:message key="profile.changed"/>
					</div>
					</form:form>  	
		    	</div>
	    	</div>
	    </div>
	    <div class="modal-footer">
	    	<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
	    </div>
    </div>
    
<div id="editinfo" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   	<div class="modal-header">
   		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
   		<h4 id="myModalLabel"><fmt:message key="userProfile.basicInfo"/></h4>
   	</div>
   	<form:form commandName="user" method="post" id="editbasicinfo" autocomplete="off" cssClass="">
    <div class="modal-body">
    	<div class="row-fluid">
    		<div class="span3">
    			<label><fmt:message key="user.gender"/></label>
    		</div>
    		<div class="span8">
    			<fieldset class="control-group${(not empty status.errorMessage) ? ' error' : ''}">
   					<c:set var="lbgender">
   						<fmt:message key="user.gender"/>
   					</c:set>
   					<div class="controls">
   						<form:select path="gender" cssClass="gender" data-bind="options:genders,optionsValue:'key',optionsText:'value',value:gender,optionsCapture:'${lbgender}'">
   						</form:select>
   						<form:errors path="gender" cssClass="help-inline"/>
   					</div>
   				</fieldset>
    		</div>
    	</div>
    	<div class="row-fluid">
    		<div class="span3">
    			<label><fmt:message key="user.dob"/></label>
    		</div>
    		<div class="span8">
    			<spring:bind path="user.dob">
       			<fieldset class="control-group${(not empty status.errorMessage) ? ' error' : ''}">
       			</spring:bind>
       				<div class="controls">
       					<div class="input-append date" id="dobirth" data-date="" data-date-format="<fmt:message key="date.format"/>">
       						<form:input path="dob" id="dob" cssClass="span10" size="18" readonly="readonly"/>
<%--    							<input name="dob" class="span10" size="18" type="text" value="${user.dob}" readonly="readonly"/> --%>
   							<span class="add-on"><i class="icon-calendar"></i></span>
						</div>
<%-- 						<form:errors path="dob" cssClass="help-inline"/>    --%>
                    </div>
       			</fieldset>
    		</div>
    	</div>
    	<div class="row-fluid">
    		<div class="span3">
    			<label><fmt:message key="user.phoneNumber"/></label>
    		</div>
    		<div class="span8">
    			<spring:bind path="user.phoneNumber">
				<fieldset class="control-group${(not empty status.errorMessage) ? ' error' : ''}">
				</spring:bind>
					<div class="controls">
	    				<form:input path="phoneNumber" id="phoneNumber"/>
	    				<form:errors path="phoneNumber" cssClass="help-inline"/>
	   				</div>
   				</fieldset>
    		</div>
    	</div>
    	<div class="row-fluid">
    		<div class="span3">
    			<label><fmt:message key="user.address.address"/></label>
    		</div>
    		<div class="span8">
    			<spring:bind path="user.address.address">
	   			<fieldset class="control-group">
	   			</spring:bind>
	                <div class="controls">
	                    <form:input path="address.address" id="address.address"/>
	                    <form:errors path="address.address" cssClass="help-inline" />
	                </div>
	            </fieldset>
            </div>
   		</div>
   		<div class="row-fluid">
   			<div class="span3">
   				<label><fmt:message key="user.address.city"/></label>
   			</div>
   			<div class="span8">
   				<spring:bind path="user.address.city">
				<fieldset class="control-group">
				</spring:bind>
                 <div class="controls">
                     <form:input path="address.city" id="address.city" />
                     <form:errors path="address.city" cssClass="help-inline"/>
                 </div>
             	</fieldset>
            </div>
		</div>
		<div class="row-fluid">
			<div class="span3">
				<label><fmt:message key="user.address.province"/></label>
			</div>
   			<div class="span8">
   				<spring:bind path="user.address.city">
   				<fieldset class="control-group">
                 <div class="controls">
                     <form:input path="address.province" id="address.province"/>
                     <form:errors path="address.province" cssClass="help-inline"/>
                 </div>	
            	</fieldset>
            	</spring:bind>
   			</div>
   		</div>
   		<div class="row-fluid">
   			<div class="span3">
				<label><fmt:message key="user.address.postalCode"/></label>
			</div>
   			<div class="span8">
   				<fieldset class="control-group">
                  <div class="controls">
                      <form:input path="address.postalCode" id="address.postalCode" />
                  </div>
              	</fieldset>
   			</div>
   		</div>
        <div class="row-fluid">
        	<div class="span3">
        		<label><fmt:message key="user.address.country"/></label>
        	</div>
        	<div class="span8">		
        		<spring:bind path="user.address.country">
        		<fieldset class="control-group">
                    <c:set var="lbcountry">
		        		<fmt:message key="user.address.country"/>
		        	</c:set>
                    <div class="controls">
                        <appfuse:country name="address.country" prompt="" default=""/>
                    </div>
                </fieldset>
                </spring:bind>
             </div>
       	</div>
    	
    </div>
    <div class="modal-footer">
    	<button class="btn" type="submit">Save</button>
    	<button class="btn" data-dismiss="modal" aria-hidden="true" type="reset">Close</button>
    	<span class="span2 accloading"></span>
    </div>
    </form:form>
</div>
<c:set var="scripts" scope="request">
<script type="text/javascript" src="<c:url value='/scripts/accsetting.js'/>"></script>
<script type="text/javascript" src="<c:url value='/scripts/switchScript.js'/>"></script>
<%@include file="/scripts/userform.js" %>
</c:set>

<script id="validateScript"></script>
<script type="text/javascript" src="<c:url value="/scripts/validator.jsp"/>" ></script>